<template>
  <div id="app">
    <div>欢迎光临_vue开发的收银系统_水果店</div>
    <div class="box">
      <div>苹果 {{price}} ¥ / 斤, 折扣 &lt; {{discount}} 折&gt;</div>
      <div>请输入您要购买的斤数 <input type="number" v-model="val"></div>
      <div><button @click="btn">结账买单~</button></div>
      <div>结账单: 总价 {{total}} ¥元 折后价: {{discountPrice}} ¥元 省了: {{save}} ¥元</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: '10',
      discount: '8',
      val: '',
      total: '',
      discountPrice: '',
      save: ''
    }
  },
  methods: {
      btn() {
        // 计算总价
        this.total = this.price * this.val
        // 计算折后价
        this.discountPrice = this.price * this.val * (this.discount / 10)
        // 计算省多少钱
        this.save = this.price * this.val - this.price * this.val * (this.discount / 10)
      }
  }
}
</script>

<style scoped>
  div {
    text-align: center;
    
  }
  .box {
    height: 110px;
    border: 1px solid #ccc;
    padding: 2px 2px 0 2px;
  }
  .box>div {
    height: 23px;
    line-height: 23px;
    border: 1px solid #ccc;
    margin-bottom: 2px;
  }
  .box> div:first-child {
    font-weight: 900;
    font-size: 19px;
  }

</style>
